<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理收货地址</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/adderss.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="wrap" id="app">

        <!-- 头部 start -->
        <header class="header_bar">
            <a href="user.html">
                <div class="header_bar_back"></div>
            </a>
            <div class="header_bar_title">管理收货地址</div>
        </header>
        <!-- 头部 end -->
        <div class="container">
            <!-- 地址列表 start -->
            <!-- 地址列表 end -->
            <!-- 地址列表 start -->
            <div class="address" onclick="location.href='add-address.html'"
                 v-for="(address,index) in addresses" :key="index">
                <p>{{address.name}}</p>
                <p>{{address.phone}}</p>
                <p>{{address.address}}</p>
                <span class="iconfont icon-youjiantou"></span>
            </div>
            <!-- 地址列表 end -->
        </div>
        <div class="">
            <button class="account" onclick="location.href='add-address.html'">新建收货地址</button>
        </div>
    </div>
<script>
    const { createApp,ref,onMounted } = Vue
    createApp({
        setup(){
            const addresses = ref([])

            //接入添加地址信息
            const isLoading = ref(false)
            const addAddressUsers = ref([])

            const loadAddresses = async () => {
                try {
                    const response = await axios.get('http://localhost:3000/addAddress');
                    console.log('接口返回数据:', response.data);
                    addAddressUsers.value = response.data || [];
                    console.log('注册用户信息加载成功');
                } catch (error) {
                    console.error('加载注册用户信息失败:', error);
                    alert('系统初始化失败，请刷新页面重试');
                }
            };
            onMounted(() => {
                loadAddresses();
            });


            return{
                 addresses,
                 isLoading,
                 addAddressUsers,
                 loadAddresses
            }
        }
    }).mount("#app")
</script>

</body>

</html>